<template>
  <el-row :gutter="20"
          :class="['detail-row', base ? 'base-info' : '']">
    <el-col v-for="(item, index) in infoArr"
            :span="info.transportMode === 1 && item.flag === 'quote' ? 0 : item.col"
            :key="index"
            class="mtb5">
      <el-divider v-if="item.type === 'orderDesc' && !print"></el-divider>
      <!-- <span v-if="item.type === 'orderDesc'">
        <label class="labelSty">{{ item.label }}</label>
        <span class="detail-text">{{ item.value }}</span>
      </span> -->
      <span v-if="item.type === 'carrierName'">
        <label class="labelSty">{{ item.label }}</label>
        <Tooltip v-if="iconName"
                 :content="content"
                 :placement="placement">
          <icon-svg class-name="iconClass mr5"
                    :icon-name="iconName" />
        </Tooltip>
        <text-overflow class="detail-text"
                       :text="item.value" />
      </span>
      <span v-else-if="item.type === 'transport'">
        <label class="labelSty">{{ item.label }}</label>
        <span class="checkbox-wrap"
              :key="index"
              v-for="(i, index) in item.data">
          <span class="c-primary"
                v-if="i.value">
            <i class="el-icon-success"></i>
            <span v-if="i.type === 'pick'"> 提货 </span>
            <span v-if="i.type === 'deliver'"> 送货 </span>
            <span v-if="i.type === 'onLoad'"> 装货 </span>
            <span v-if="i.type === 'offLoad'"> 卸货 </span>
            <span v-if="i.type === 'insure'"> 保价 </span>
          </span>
        </span>
      </span>
      <span v-else-if="info.transportMode === 2 && item.flag === 'quote'">
        <label class="labelSty">{{ item.label }}</label>
        <text-overflow class="detail-text"
                       :text="item.value" />
      </span>
      <span v-else-if="item.flag !== 'quote'">
        <label class="labelSty">{{ item.label }}</label>
        <span v-if="item.type === 'trackType'"
              class="detail-text">
          <icon-svg v-if="item.value"
                    :iconName="item.value === 2 ? 'kuaididanhao' : 'dianzihuidan'" />
          <el-button v-if="item.value === 1"
                     type="text"
                     @click="toTrack(deviceCode)">
            {{ deviceCode }}
          </el-button>
          <span v-else> {{ deviceCode }}</span>
        </span>
        <span v-else-if="print"
              class="wrap_value">
          {{ item.value }}
        </span>
        <text-overflow v-else
                       class="detail-text"
                       :text="item.value" />
      </span>
    </el-col>
    <template v-if="attachments && attachments.length">
      <el-col :span="2">
        <label class="labelSty">附件:</label>
      </el-col>
      <el-col :span="22">
        <upload-file-selector :is-onload="true"
                              :is-create="true"
                              :is-cover="true"
                              :is-disabled="true"
                              :attach-form.sync="attachments" />
      </el-col>
    </template>
  </el-row>
</template>

<script>
import UploadFileSelector from "@/components/advance/upload/UploadFileSelector.vue";
import TextOverflow from "@/components/public/TextOverflow.vue";
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: "SimpleList",
  components: {
    UploadFileSelector,
    TextOverflow,
    Tooltip
  },
  props: {
    base: {
      type: Boolean,
      default: false
    },
    print: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => { }
    },
    configData: {
      type: Array,
      default: () => []
    },
    iconName: String,
    content: String,
    deviceCode: String,
    attachments: [Array]
  },
  computed: {
    infoArr () {
      this.configData.forEach((element) => {
        for (let i in this.info) {
          if (element.type === i) {
            element.value = this.info[i];
          } else {
            if (element.type === "transport") {
              element.data.forEach((item) => {
                if (item.type === i) {
                  item.value = this.info[i];
                }
              });
              element.value = 1;
            }
          }
        }
      });
      return this.configData;
    },
    placement () {
      return 'top'
    }
  },
  methods: {
    toTrack (val) { }
  }
};
</script>

<style lang="scss" scope>
.file-name {
  width: 100px;
  white-space: pre-wrap;
  word-break: break-all;
}
.base-info {
  background: #f6f6f6;
  padding: 10px 10px 0;
}
.checkbox-wrap {
  font-size: 16px;
  > span {
    margin-right: 10px;
  }
}
.detail-row {
  > div > span {
    margin-bottom: 10px;
    display: flex;
    font-size: 16px;
    align-items: center;
  }

  span {
    label {
      display: inline-block;
      margin-right: 10px;
      white-space: nowrap;
    }
    .detail-text {
      // font-weight: bold;
      font-size: 16px;
    }
    .img-wrap {
      list-style: none;
    }
    .img-item {
      margin-right: 20px;
      .img {
        width: 100px;
        height: 100px;
        background-color: var(--prev-border-color-grey);
      }
      p {
        text-align: center;
      }
    }
  }
}
.labelSty {
  font-size: 16px;
  color: var(--prev-color-text-silvergrey);
}
.mtb5 {
  margin: 5px 0;
}
.wrap_value {
  white-space: pre-wrap;
  word-break: break-all;
}
.iconClass {
  width: 14px;
  height: 14px;
}
</style>
